<template>
  <el-dialog title="创建LEAD" :visible.sync="addRowData.show" width="600px" class="m-dialog"
             :close-on-click-modal="false" :close-on-press-escape="false" @close="clearAddRowDataForm">
    <el-form :model="addRowData.form" :inline="true" ref="refAddRowDataForm" :rules="addRowData.rules" label-position="left" label-width="130px">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="addRowData.form.phone" clearable>
        </el-input>
     <!--   <div class="activeBtn">检测是否存在</div>-->
      </el-form-item>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="addRowData.form.realName" clearable></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="称谓" prop="title">
            <el-select v-model="addRowData.form.title" clearable>
              <el-option label="先生" value="0081"></el-option>
              <el-option label="女士" value="0082"></el-option>
              <el-option label="太太" value="0083"></el-option>
              <el-option label="小姐" value="0084"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="电邮地址" prop="email">
        <el-input v-model="addRowData.form.email" clearable></el-input>
      </el-form-item>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="QQ" prop="qq">
            <el-input v-model="addRowData.form.qq" clearable></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="WeChat" prop="wechat">
            <el-input v-model="addRowData.form.wechat" clearable></el-input>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="CS获取LEAD途径" prop="root">
        <el-select v-model="addRowData.form.root" placeholder="请选择" clearable>
          <el-option label="Live800" value="Live800"></el-option>
          <el-option label="QQ" value="QQ"></el-option>
          <el-option label="WeChat" value="WeChat"></el-option>
          <el-option label="客服电话" value="客服电话"></el-option>
        </el-select>
      </el-form-item>
    <!--  <el-form-item label="CS获取LEAD途径" prop="root">
        <el-input v-model="addRowData.form.root" clearable></el-input>
      </el-form-item>-->
      <el-form-item label="CS获取LEAD时间" prop="rootTime" class="last">
        <el-date-picker
          v-model="addRowData.form.rootTime"
          clearable
          :editable="false"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addRowData.show = false">取消</el-button>
      <el-button type="primary" @click="addRowDataSubmit" :loading="addLoading">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import * as LeadsAPI from '@/Api/lead';
  export default {
    name: 'CompAddLead',
    data () {
      return {
        addRowData: {
          show: false,
          form: {
            phone: '',
            title: '',
            realName: '',
            email: '',
            qq: '',
            wechat: '',
            root: '',
            rootTime: '',
          },
          rules: {
            phone: [
              {required: true, trigger: 'blur', message: '手机号不能为空'},
              {validator:function(rule,value,callback){
                if(isNaN(value)){
                  callback(new Error("手机号格式错误"));
                }else{
                  callback();
                }
              }, trigger: 'blur'}
            ],
            email:[
              {type:'email', trigger: 'blur', message: '邮箱格式错误'}
            ],
            realName:[
              {max: 20, trigger: 'blur', message: '姓名长度不能超过20个字符'}
            ],
            qq:[
              {pattern: /[1-9][0-9]{4,}/, trigger: 'blur', message: 'qq格式错误'},
            ]
          }
        },
        addLoading:false,
      }
    },
    watch:{
      'show'(val){
        this.addRowData.show = val;
      }
    },
    props:['show','from'],
    methods: {
      clearAddRowDataForm() {
        this.$emit('update:show', false)
        this.$refs.refAddRowDataForm.resetFields();
      },
      addRowDataSubmit() {
        this.$refs.refAddRowDataForm.validate((flg) => {
          if (!flg) {
            return;
          }
          this.addLoading = true;
          LeadsAPI[this.from=='desktop'?'ileadCsCreate':'leadCsCreate'](this.addRowData.form)
            .then(res => {
              this.addLoading = false;
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.$message({
                message: '新建成功',
                type: 'success'
              });
              this.$emit('addSuccess');
              this.addRowData.show = false;
            })
            .catch(error => {
              this.addLoading = false;
              console.log(error)
            })
        })
      },
    }
  }
</script>

<style scoped lang="scss">
</style>
